<template>
	<view class="main">
		<scroll-view class="sidebar_main_view" scroll-y="true">
				<view v-for="(selection_title) in enabled_selections" class="selection_box" @click="modules_handle(selection_title.id)">
					<view class="txt">{{ selection_title.title }}</view>
				</view>
		</scroll-view>

		<scroll-view scroll-y="true" class="modules_main_view" enable-flex="true" >
			<!--
			<view v-for="c_model in modules" class="one_model" @click="handle(c_model.index_src, c_model.id, c_model.title)">
				<image :src="c_model.image_src" mode="scaleToFill"></image>
				<view>{{ c_model.title }}</view>
			</view>
			-->
			<u-grid :border="false" col="2">
				<u-grid-item v-for="mod in modules" @click="handle(mod.index_src, mod.id, mod.title)" bgColor="white" custom-style="padding: 7px;">
					<u-image :src="mod.image_src" :lazy-load="true" width="200rpx" height="200rpx" radius="15px"/>
					<text style="white-space: nowrap; font-size: 14.5px; color: #505256;padding-top: 5px;">{{ mod.title }}</text>
				</u-grid-item>
			</u-grid>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				reloading: true,
				enabled_selections: [],
				modules: [],
				
			}
		},
		onShow(options) {
			if (getApp().globalData.tmp.switchTab_ID) {
				// this.modules_handle(getApp().globalData.tmp.switchTab_ID)
				this.modules_handle(getApp().globalData.tmp.switchTab_ID)
				getApp().globalData.tmp.switchTab_ID = null
			}
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		onLoad() {
			this.refresh()
		},
		methods: {
			refresh() {
				// 请求侧栏
				uni.request({url: getApp().globalData.base_url + "/get/usemoduleclasses"})
					.then(
					(data) => {
						data = data.data
						this.enabled_selections = data
						// 请求模块列表
						return uni.request({
							url: getApp().globalData.base_url + "/get/usefulmodules/" + this.enabled_selections[0].id
						})
					})
					.then((data) => {
						data = data.data
						this.modules = data
					})
			},
			modules_handle(id) {
				uni.request({
					url: getApp().globalData.base_url + "/get/usefulmodules/" + id
				})
				.then((data) => {
					data = data.data
					this.modules = data
				})
			},
			handle(turl, id, title) {
				uni.navigateTo({url: "/pacA/pages/artical/artical?url="+turl+"&article_id="+id+"&title="+title})
			}
		},
	}
</script>

<style lang="scss">
	.main {
		height: 100vh;
		width: 100vw;
		// background-color: rgb(217, 217, 217);
	}
	.sidebar_main_view {
		display: inline-block flex;
		float: left;
		border-top-right-radius: 30px;
		height: 100%;
		width: 24%;
		background-color: white;
		flex-direction: row;
		border-right: 1.5px solid grey;
		border-top: 1.5px solid grey;
	}
	.selection_box {
		text-align: center;
		height: 10%;
		vertical-align: middle;
		border-bottom: 1px solid;
		border-color: grey;
		align-content: center;
		.txt {
			position: relative;
			font-size: 15px;
			top: 50%;
			transform: translateY(-8px);
		}
	}
	.modules_main_view {
		display:flex;
		justify-content: space-evenly;
		float: left;
		width: 75%;
		// height: 100vh;
		max-height: 100vh;
		flex-wrap: wrap;
		// background-color: rgb(217, 217, 217);
	}
</style>
